<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <template id="cpn">
        <div>
            子组件n1：{{n1}}
            <br>
            子组件number1：{{number1}}
            <br>
            <!-- 可以使用v-model进行双向绑定 -->
            子组件输入框1：<input type="text" v-model="number1">
            <br>
            <br>
            x100
            <br>
            <br>
            子组件n2：{{n2}}
            <br>
            子组件number2：{{number2}}
            <br>
            子组件输入框2：<input type="text" v-model="number2">
        </div>
    </template>
    <div id="app">
        父组件num11：{{num1}}
        <br>
        父组件num12：{{num2}}
        <br>
        <br>
        <cpn :n1="num1" :n2="num2" @n1-change="n1Change" @n2-change="n2Change"></cpn>
    </div>
    <script>
        const cpn = {
            template: '#cpn',
            props: {
                n1: Number,
                n2: Number,
            },
            data() {
                return {
                    number1: this.n1,
                    number2: this.n2,
                }
            },
            // 使用watch，监听data中值的变化
            watch: {
                // 方法名必须和值的名称一样才能监听，参数（新的值，旧的值）
                number1(newValue) {
                    this.number2 = this.number1 * 100;// 修改number2的值为1的100倍
                    this.$emit('n1-change', this.number1);// 发射事件叫父组件修改值
                },
                number2(newValue) {
                    this.number1 = this.number2 / 100;
                    this.$emit('n2-change', this.number2);
                },
            },
        }
        const app = new Vue({
            el: '#app',
            data: {
                num1: 12,
                num2: 1200,
            },
            methods: {
                n1Change(value) {
                    this.num1 = parseFloat(value);
                },
                n2Change(value) {
                    this.num2 = parseFloat(value);
                },
            },
            components: {
                cpn
            },
        })
    </script>
</body>

</html>